<template>
  <div>
    <div>
      <Nav></Nav>
      <v-title>游戏商城</v-title>
    </div>
    <el-row>
      <el-col :span="6" :offset="4">
        <h2>游戏商城</h2>
      </el-col>
    </el-row>
    <br/>
    <div class="search">
    <el-input v-model="name" placeholder="请输入关键字" />&nbsp;&nbsp;
    <button
      type="button"
      class="el-button el-button--primary is-round"
      @click="getGameGoodsList"
    >
      <span>查询</span>
    </button>
   </div>
    <br /><br />
    <el-row class="game-list">
      <div v-if="Object.keys(gameGoodsList).length > 0">
        <div>
          <div v-for="(gameGoods, key) in gameGoodsList" v-bind:key="key">
            <el-card class="box-card">
              <div class="text item">
                <el-row>
                  <el-col :span="6"
                    ><img :src="gameGoods.mainPicUrl" width="250" height="192"
                  /></el-col>
                  <el-col :span="14" :offset="4">
                    <el-row>
                    <router-link :to="`/gameGoodsDetail/${gameGoods.id}`">{{
                      gameGoods.name
                    }}</router-link>
                    </el-row>
                    <br/><br/><br/>
                    <el-row>
                      <el-col :span="4">
                        <span class="detailContent">价格</span>
                      </el-col>
                      <el-col :span="6">
                        <span class="detailContentPrice">￥{{ gameGoods.price }}</span>
                      </el-col>
                    </el-row>
                    <br/><br/><br/>
                    <el-row>
                      <el-col :span="4">
                        <span class="detailContent">库存</span>
                      </el-col>
                      <el-col :span="6">
                        <span class="detailContentNum">{{ gameGoods.num }}</span>
                      </el-col>  
                    </el-row>
                    <br />
                    
                  </el-col>
                </el-row>
              </div>
            </el-card>
            <br /><br />
          </div>
        </div>
        <el-backtop />
        <el-divider>亲~已经看到底了吖~</el-divider>
      </div>
      <div v-if="Object.keys(gameGoodsList).length == 0">
        <el-result title="暂时没有相关游戏商品" subTitle="抱歉~暂时没有相关游戏商品噢~">
          <template slot="icon">
            <el-image :src="require('@/assets/logo.png')" style="width: 200px; height: 200px"/>
          </template>
        </el-result>
      </div>
    </el-row>
    <br />
  </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import { getGameGoodsList } from "@/api/index";
export default {
  name: "",
  created() {
    this.getGameGoodsList();
  },
  components: {
    Nav,
    VTitle,
  },
  data() {
    return {
      name: "",
      gameGoodsList: [],
    };
  },
  methods: {
    async getGameGoodsList() {
      let that = this;
      that.gameGoodsList = [];
      await getGameGoodsList(that.name).then((res) => {
        if (res.code == "200") {
          if (res.data != null) {
            that.gameGoodsList = res.data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
  position: relative;
  margin-bottom: 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}
.el-input {
  width: 25%;
}
.game-list {
  width: 50%;
  margin-left: 25%;
}
a {
  font-size: 25px;
  color: #2abaca;
  font-weight: bolder;
}
.old-name {
  color: #000;
}
.detailContent {
  font-size: 12px;
  line-height: 20px;
  display: block;
  color: #9497a0;
}
.detailContentPrice {
  font-size: 16px;
  line-height: 20px;
  display: block;
  color: red;
  font-weight: bold;
}
.detailContentNum {
  font-size: 16px;
  line-height: 20px;
  display: block;
  color: black;
  font-weight: bold;
}
.search{
  margin-left: 1000px
}
</style>